import React from "react";
import { UserOutlined, VideoCameraOutlined } from "@ant-design/icons";
import { Layout, Menu } from "antd";
import { Outlet, useNavigate } from "react-router-dom";

const { Sider, Content } = Layout;

const AiAssistant: React.FC = () => {
  const navigate = useNavigate();

  return (
    <Layout style={{ width: "100%", height: "100%" }}>
      <Sider trigger={null} collapsible>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["/homepage/chat"]}
          items={[
            {
              key: "/homepage/chat",
              icon: <UserOutlined />,
              label: "AI 问答",
            },
            {
              key: "/homepage/image",
              icon: <VideoCameraOutlined />,
              label: "图片理解",
            },
          ]}
          onSelect={(item) => {
            navigate(item.key);
          }}
        />
      </Sider>
      <Layout>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  );
};

export default AiAssistant;
